import React, { useEffect, useState } from 'react'
import { View, Image } from '@tarojs/components'
import { backgroundObj } from '@/utils/utils'
import Container from '../Container'
import Taro, { useDidShow, useDidHide } from '@tarojs/taro';
import Router from '@/utils/router';
import './index.scss'
const RenderStyle = (props) => {
    const { data = {} } = props
    const { list = [], timeFlag, showComponents = 'all', showCount, top, bottom, countType } = data
    const [renderList, setRenderList] = useState([])

    const defaultImage = 'https://wx.gy.cn/wechatImage/defaultImg.png'

    useEffect(() => {
        if (list.length === 0) {

        }
        else {
            setRenderList(list.filter(item => {
                if (timeFlag) {
                    return timeFlag
                }
                return item.status === '1'
            }))
        }
    }, [list.length])
    if (countType === 'list') {
        return <View className='wxPage_Form_style1'>
            <View className='list-style-list'>
                {renderList.filter((val, o) => {
                    if (showComponents === 'all') {
                        return true
                    }
                    else {
                        if (showCount < (o + 1)) {
                            return false
                        }
                        return true
                    }
                }).map((val, o) => {
                    const { title, cover, id } = val
                    return <View onClick={() => {
                        Router('collectWps', {
                            args: {
                                id: id
                            }
                        })
                    }} className='form-item'>
                        <View className='item-image'>
                            <Image style={{ width: '100%', height: '100%' }} src={cover || defaultImage}></Image>
                        </View>
                        <View className='item-info'>
                            <View className='item-info-title'>{title}</View>
                        </View>
                    </View>
                })}
            </View>
        </View>
    }
    else if (countType === 'bigImage') {
        return <View className='wxPage_Form_style2'>
            <View className='list-style-list'>
                {renderList.filter((val, o) => {
                    if (showComponents === 'all') {
                        return true
                    }
                    else {
                        if (showCount < (o + 1)) {
                            return false
                        }
                        return true
                    }
                }).map(val => {
                    const { title, cover, id } = val
                    return <View onClick={() => {
                        Router('collectWps', {
                            args: {
                                id: id
                            }
                        })
                    }} className='form-item'>
                        <View className='item-image'>
                            <Image style={{ width: '100%', height: '100%' }} src={cover || defaultImage}></Image>
                        </View>
                        <View className='item-info'>
                            <View className='item-info-title'>{title}</View>
                        </View>
                    </View>
                })}
            </View>
        </View>
    }
    else {
        return <View className='wxPage_Form_style3'>
            <View className='list-style-list'>
                {renderList.filter((val, o) => {
                    if (showComponents === 'all') {
                        return true
                    }
                    else {
                        if (showCount < (o + 1)) {
                            return false
                        }
                        return true
                    }
                }).map(val => {
                    const { title, cover, id } = val
                    return <View onClick={() => {
                        Router('collectWps', {
                            args: {
                                id: id
                            }
                        })
                    }} className='form-item'>
                        <View className='item-image'>
                            <Image style={{ width: '100%', height: '100%' }} src={cover || defaultImage}></Image>
                        </View>
                        <View className='item-info'>
                            <View className='item-info-title'>{title}</View>
                        </View>
                    </View>
                })}
            </View>
        </View>
    }
}

const FormRender = (props) => {
    const { data = {} } = props
    const { list = [], backgroundColor, backgroundImage, top, bottom, titleFlag } = data


    return <Container linkGo={() => {
        Taro.setStorageSync('formList', list)
        Router('formList',)
    }} hasTitle={titleFlag} {...props}>
        <RenderStyle {...props}></RenderStyle>
    </Container>



}
export default FormRender